<template>
  <div class="item" @click="toDetail(item)">
    <dl>
      <dt><img :src="item.img" alt="" /></dt>
      <dd>{{ item.test }}</dd>
      <dd>{{ item.age }}</dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    item: {
      type: Object, // 类型
      default: () => ({}),
      // required: true, // 是否必须
      // default: () => {
      //   // 返回值
      //   return {};
      // },
    },
  },
  methods: {
    toDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          item,
        },
      });
    },
  },
  created() {
    // console.log(this);
  },
};
</script>

<style>
.item {
  width: 30%;
  display: flex;
  justify-content: center;
}
</style>